<template>
    <div class="app-container">
      <!-- 搜索表单 -->
      <div class="search-wrapper">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="queryParams.username"
              placeholder="请输入用户名"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作按钮区域 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header" >
            <ButtonGroup>
            </ButtonGroup>
            <!-- 齿轮图标及下拉复选框 -->
            <el-dropdown trigger="hover">
              <div class="setting-icon-wrapper">
                <el-icon class="setting-icon">
                  <Setting />
                </el-icon>
              </div>
              <template #dropdown>
                <div style="padding: 10px; width: 180px;">
                  <el-checkbox-group v-model="checkedOptions">
                    <el-checkbox label="边框" />
                    <el-checkbox label="斑马纹" />
                    <el-checkbox label="表头背景" />
                  </el-checkbox-group>
                </div>
              </template>
            </el-dropdown>
          </div>
        </template>

          <!-- 数据表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          :border="checkedOptions.includes('边框')"
          :stripe="checkedOptions.includes('斑马纹')"
          :header-cell-style="getHeaderStyle"
        >
          <el-table-column type="selection"  width="55" align="center" />
          <el-table-column label="会话凭证" align="center" width="180" prop="tokenValue" show-overflow-tooltip />
          <el-table-column label="账号" align="center" prop="username" show-overflow-tooltip />
          <el-table-column label="登录IP" align="center" prop="ip" width="180" />
          <el-table-column label="登录地点" align="center" prop="ipLocation" width="180" />
          <el-table-column label="浏览器" align="center" prop="browser" width="180" />
          <el-table-column label="操作系统" align="center" prop="os" width="180" />
          <el-table-column label="登录时间" align="center" prop="lastLoginTime" width="180" />
          <el-table-column label="操作" align="center" width="280" fixed="right">
            <template #default="scope">
              <el-button
                v-permission="['monitor:online:forceLogout']"
                type="danger"
                link
                icon="Delete"
                @click="handleDelete(scope.row)"
              >强退</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="total"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </template>

  <script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import {
    getOnlineUserApi,
    forceLogoutApi
  } from '@/api/system/user'
  import ButtonGroup from "@/components/ButtonGroup/index.vue";

  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    username: null
  })

  const loading = ref(false)
  const total = ref(0)
  const tableData = ref([])
  const queryFormRef = ref<FormInstance>()


  const checkedOptions = ref<string[]>(['边框', '斑马纹', '表头背景'])

  // 获取表头样式
  const getHeaderStyle = () => {
    if (checkedOptions.value.includes('表头背景')) {
      return { backgroundColor: '#f5f7fa', color: '#333', fontWeight: 'bold' }
    }
    return {}
  }
  // 获取标签列表
  const getList = async () => {
    loading.value = true
    try {
      const { data } = await getOnlineUserApi(queryParams)
      tableData.value = data.records
      total.value = data.total
    } catch (error) {
    }
    loading.value = false
  }

  // 删除
  const handleDelete = (row: any) => {
    ElMessageBox.confirm(`是否确认强退 ${row.tokenValue} 这个用户?`, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        await forceLogoutApi(row.tokenValue)
        ElMessage.success('强制下线成功')
        getList()
      } catch (error) {
      }
    })
  }

  // 搜索
  const handleQuery = () => {
    queryParams.pageNum = 1
    getList()
  }

  // 重置查询
  const resetQuery = () => {
    queryFormRef.value?.resetFields()
    handleQuery()
  }

  // 分页大小改变
  const handleSizeChange = (val: number) => {
    queryParams.pageSize = val
    getList()
  }

  // 页码改变
  const handleCurrentChange = (val: number) => {
    queryParams.pageNum = val
    getList()
  }

  // 初始化
  onMounted(() => {
    getList()
  })
  </script>

  <style lang="scss" scoped>
  .app-container {
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    // 添加自定义表单样式
    :deep(.custom-dialog) {
      .el-dialog__body {
        padding: 20px 40px;
      }

      .custom-form {
        .el-form-item {
          margin-bottom: 22px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .el-form-item__label {
          font-weight: 500;
          color: var(--el-text-color-regular);
        }

        .el-input__wrapper {
          box-shadow: 0 0 0 1px #dcdfe6 inset;

          &:hover {
            box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }
        }

        .el-select {
          width: 100%;
        }

        .el-radio-group {
          .el-radio {
            margin-right: 30px;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }

    .dialog-footer {
      text-align: right;
      padding-top: 20px;

      .el-button {
        padding-left: 25px;
        padding-right: 25px;

        & + .el-button {
          margin-left: 12px;
        }
      }
    }
  }

  // 暗黑模式适配
  :root[data-theme='dark'] {
    :deep(.custom-dialog) {
      .custom-form {
        .el-input__wrapper {
          box-shadow: 0 0 0 1px var(--el-border-color) inset;
        }
      }
    }
  }

  /* 齿轮图标外层容器 */
  .setting-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f2f2f2; /* 灰色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  /* 悬停效果 */
  .setting-icon-wrapper:hover {
    background-color: #e0e0e0; /* 鼠标悬停变深一点 */
  }

  .setting-icon {
    color: #606266;
    font-size: 18px;
  }
  </style>
